<template>
  <view class="wh_750 bg_F5F5F5 flex flex-column align-center pageHeight">
    <s-header-title ref="headerTitle" isDisplayBack title="个人资料" is-fixed background="#FFFFFF"
                    @getPageHeight="getPageHeight"></s-header-title>
    <view :style="{height:`${page.headerHeight}px`}"></view>
    <single-gap title="头像" margin="25rpx 0 0 0" @elementClick="goAvatarList">
      <view class="personalData_avatar flex align-center justify-end">
        <image-avater :src="page.personalData.head" :width="76" :height="76" class="mr_15"></image-avater>
        <text class="iconfont icon-ic_rightarrow fs_26"></text>
      </view>
    </single-gap>
    <single-gap title="姓名" margin="25rpx 0 0 0" @elementClick="openNamePopup">
      <view class="personalData_avatar flex align-center justify-end">
        <text class="personalData_avatar_text mr_15" v-if="page.personalData.suername || page.personalData.name">
          {{ page.personalData.surname }}{{ page.personalData.name }}
        </text>
        <text class="personalData_avatar_text mr_15" v-else>
          未设置
        </text>
        <text class="iconfont icon-ic_rightarrow fs_26"></text>
      </view>
    </single-gap>
    <single-gap title="性别" margin="25rpx 0 0 0">
      <view class="personalData_avatar flex align-center justify-end">
        <text class="personalData_avatar_text mr_15">
          {{ page.personalData.sex == 1 ? '男' : '女' }}
        </text>

      </view>
    </single-gap>
    <single-gap title="生日" margin="25rpx 0 0 0" @elementClick="openBetterCalendar">
      <view class="personalData_avatar flex align-center justify-end">
        <text class="personalData_avatar_text mr_15" v-if="!!page.personalData.birthday" :style="{
          color:page.personalData.birthday_type == 2 ? '#000000' : '#9F9F9F'
        }">
          {{ dayjs(page.personalData.birthday).format('YYYY年MM月DD日') || '未设置' }}
        </text>
        <text class="personalData_avatar_text mr_15" v-if="!!page.personalData.lunar_time" :style="{
          color: page.personalData.birthday_type == 1 ? '#000000': '#9F9F9F'
        }">
          {{ page.personalData.lunar_time || '未设置' }}
        </text>
        <text class="personalData_avatar_text mr-15"
              v-if="!page.personalData.birthday && !page.personalData.lunar_time">
          {{ page.personalData.lunar_time || '未设置' }}
        </text>
        <text class="iconfont icon-ic_rightarrow fs-26"></text>
      </view>
    </single-gap>
    <!--    <single-gap title="纪念日" margin="25rpx 0 0 0" @elementClick="openCommemoration"-->
    <!--                v-if="page.personalData.memorials.length <= 0">-->
    <!--      <view class="personalData_avatar flex align-center justify-end">-->
    <!--        <text class="personalData_avatar_text mr_15">-->
    <!--          去编辑-->
    <!--        </text>-->
    <!--        <text class="iconfont icon-ic_rightarrow fs_26"></text>-->
    <!--      </view>-->
    <!--    </single-gap>-->
    <single-gap title="逝世纪念日" margin="25rpx 0 0 0" @elementClick="openBetterCalendarDie"
                v-if="page.personalData.memorials.length > 0"
                v-for="(item,index) in page.personalData.memorials" :key="index">
      <view class="personalData_avatar flex align-center justify-end">
        <view class="flex flex-column align-end">
          <!--          <text class="personalData_avatar_text mr_15">-->
          <!--            {{ item.name }}-->
          <!--          </text>-->
          <view class="personalData_avatar_text mr_15 flex align-center" v-if="!!item.date">
            <view :style="{
              color:item.type == 2 ? '#000000' : '#9F9F9F'
            }">
              {{ dayjs(item.date).format('YYYY年MM月DD日') }}
            </view>
            <view class="ml_15" :style="{
              color:item.type == 1 ? '#000000': '#9F9F9F'
            }">
              {{ item.lunar_date }}
            </view>
          </view>
        </view>
        <!--        <text class="iconfont icon-ic_rightarrow fs_26"></text>-->
      </view>
    </single-gap>
    <single-gap title="更多" v-if="!page.ismore" margin="25rpx 0 0 0" padding="36rpx 0 36rpx 0"
                @elementClick="page.ismore = true">
      <view class="personalData_avatar flex align-center justify-end" style="height: 100%">
        <text class="iconfont icon-ic_rightarrow fs_26"></text>
      </view>
    </single-gap>
    <single-gap title="生日/纪念日提醒设置" v-if="page.ismore && page.personalData.is_own != 1" margin="25rpx 0 0 0"
                @elementClick="goReminderSetting">
      <view class="flex align-center justify-end" style="height: 100%">
        <text class="iconfont icon-ic_rightarrow fs_26"></text>
      </view>
    </single-gap>
    <single-gap title="签名" v-if="page.ismore" margin="25rpx 0 0 0" @elementClick="goSignature">
      <view class="personalData_avatar flex align-center justify-end">
        <text class="personalData_avatar_text mr_15">
          {{ page.personalData.autograph || '未设置' }}
        </text>
        <text class="iconfont icon-ic_rightarrow fs_26"></text>
      </view>
    </single-gap>
    <single-gap title="字号" v-if="page.ismore" margin="25rpx 0 0 0" @elementClick="setTypeSize">
      <view class="personalData_avatar flex align-center justify-end">
        <text class="personalData_avatar_text mr_15">
          {{ page.personalData.card_zi || '未设置' }}
        </text>
        <text class="iconfont icon-ic_rightarrow fs_26"></text>
      </view>
    </single-gap>
    <single-gap title="祖籍地" v-if="page.ismore" margin="25rpx 0 0 0"
                @elementClick="openAncestral(1)">
      <view class="personalData_avatar flex align-center justify-end">
        <view class="personalData_avatar_text mr_15 flex align-end flex-column">
          <view>{{ page.personalData.ancestral || '未设置' }}</view>
          <view class="wh_380" style="white-space: nowrap;text-align: end;text-overflow: ellipsis;overflow: hidden;">
            {{ page.personalData.ancestral_address }}
          </view>
        </view>
        <text class="iconfont icon-ic_rightarrow fs_26"></text>
      </view>
    </single-gap>

    <single-gap title="现居地" v-if="page.ismore && page.personalData.is_alive" margin="25rpx 0 0 0"
                @elementClick="openAncestral(2)">
      <view class="personalData_avatar flex align-center justify-end">
        <view class="personalData_avatar_text mr_15 flex flex-column align-end">
          <view>
            {{ page.personalData.current_residence || '未设置' }}
          </view>
          <view class="wh_380" style="text-align: end;white-space: nowrap;text-overflow: ellipsis;overflow: hidden">
            {{ page.personalData.current_residence_address }}
          </view>
        </view>
        <text class="iconfont icon-ic_rightarrow fs_26"></text>
      </view>
    </single-gap>
    <!--    <single-gap title="血型" v-if="page.ismore" margin="25rpx 0 0 0" @elementClick="bloodsOpen">-->
    <!--      <view class="personalData_avatar flex align-center justify-end">-->
    <!--        <text class="personalData_avatar_text mr_15">-->
    <!--          {{ page.personalData.bloods || '未设置' }}-->
    <!--        </text>-->
    <!--        <text class="iconfont icon-ic_rightarrow fs_26"></text>-->
    <!--      </view>-->
    <!--    </single-gap>-->
    <single-gap title="学历" v-if="page.ismore" margin="25rpx 0 0 0" @elementClick="educationOpen">
      <view class="personalData_avatar flex align-center justify-end">
        <text class="personalData_avatar_text mr_15">
          {{ page.personalData.education || '未设置' }}
        </text>
        <text class="iconfont icon-ic_rightarrow fs_26"></text>
      </view>
    </single-gap>
    <single-gap title="职业" v-if="page.ismore" margin="25rpx 0 0 0" @elementClick="openOccupationalPopup">
      <view class="personalData_avatar flex align-center justify-end">
        <text class="personalData_avatar_text mr_15">
          {{ page.personalData.occupation || '未设置' }}
        </text>
        <text class="iconfont icon-ic_rightarrow fs_26"></text>
      </view>
    </single-gap>
    <single-gap title="在世" margin="25rpx 0 0 0" v-if="page.ismore && page.personalData.is_own != 1">
      <!--      <u-switch v-model="personalData.is_alive != 2" size="40" :activeColor="'#FF4206'"-->
      <!--                @change.stop="setAlice"></u-switch>-->
      <view class="personalData_avatar flex align-center justify-end" style="height: 100%">
        <su-switch v-model="page.personalData.is_alive"
                   size="40"
                   :bg="'bg_FF4206'"
                   @change="setAlice($event)"
        ></su-switch>
      </view>
    </single-gap>
    <single-gap title="祭日" v-if="page.ismore && !page.personalData.is_alive" margin="25rpx 0 0 0"
                @elementClick="openBetterCalendarDie">
      <view class="personalData_avatar flex align-center justify-end">
        <text class="personalData_avatar_text mr_15" v-if="!!page.personalData.dieday" :style="{
          color:page.personalData.is_lunar_die == 2 ? '#000000' : '#9F9F9F'
        }">
          {{ dayjs(page.personalData.dieday).format('YYYY年MM月DD日') || '未设置' }}
        </text>
        <text class="personalData_avatar_text mr_15" v-if="!!page.personalData.lunar_dieday" :style="{
          color: page.personalData.is_lunar_die == 1 ? '#000000': '#9F9F9F'
        }">
          {{ page.personalData.lunar_dieday || '未设置' }}
        </text>
        <text class="personalData_avatar_text mr-15"
              v-if="!page.personalData.dieday && !page.personalData.lunar_dieday">
          {{ page.personalData.lunar_dieday || '未设置' }}
        </text>
        <text class="iconfont icon-ic_rightarrow fs-26"></text>
      </view>
    </single-gap>
    <single-gap title="墓地" v-if="page.ismore && !page.personalData.is_alive" margin="25rpx 0 0 0"
                @elementClick="openAncestral(0)">
      <view class="personalData_avatar flex align-center justify-end">
        <view class="personalData_avatar_text mr_15 flex flex-column align-end">
          <view>
            {{ page.personalData.current_residence || '未设置' }}
          </view>
          <view class="wh_380" style="text-align: end;white-space: nowrap;text-overflow: ellipsis;overflow: hidden">
            {{ page.personalData.current_residence_address }}
          </view>
        </view>
        <text class="iconfont icon-ic_rightarrow fs_26"></text>
      </view>
    </single-gap>

    <textare-gap title="个人简介" margin="25rpx 0 0 0" :value="page.personalData.remark" :options="page.options"
                 :personalData="page.personalData" :flag="1"></textare-gap>
    <view class="personalData_bottomEdit mt_70" v-if="page.personalData.is_own != 1" @click="deleteMember">
      <text class="personalData_bottomEdit_text">
        删除{{ !!page.personalData.surname ? `${page.personalData.surname}${page.personalData.name}` : page.personalData.remark
        }}
      </text>
    </view>
    <view class="hW_100"></view>
    <!-- 名字修改 -->
    <first_popup ref="namePopUp" @closePopup="namePopupClose">
      <template #content>
        <view class="familyMemberPopUp flex flex-column align-center">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              修改姓名
            </view>
          </view>
          <image class="familyMemberPopUp_icon z_1" :src="`${IMG_URL}/index/add_icon.png`"></image>
          <view class="familyMemberPopUp_editInfo flex align-center justify-between mt_64">
            <view class="familyMemberPopUp_editInfo_left flex align-center justify-center">
              <input type="text" v-model="info.namePopupFrom.suername"
                     :placeholder="'尊姓'"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" @input="suernameInput"
                     :focus="info.suernameFocus">
            </view>
            <view class="familyMemberPopUp_editInfo_right flex align-center justify-center">
              <input type="text" v-model="info.namePopupFrom.name"
                     :placeholder="'大名'"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" @input="nameInput">
            </view>
          </view>
        </view>
      </template>
    </first_popup>

    <!-- 字号修改 -->
    <first_popup ref="fontPopUp" @closePopup="fontPopupClose">
      <template #content>
        <view class="familyMemberPopUp flex flex-column align-center">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              修改字号
            </view>
          </view>
          <image class="familyMemberPopUp_icon z_1" :src="`${IMG_URL}/index/add_icon.png`"></image>
          <view class="familyMemberPopUp_editInfo flex align-center justify-between mt_64">
            <view class="familyMemberPopUp_editInfo_right flex-sub flex align-center justify-center">
              <input type="text" v-model="fontInfo.value"
                     :placeholder="'字号'"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" @input="fontInput">
            </view>
          </view>
        </view>
      </template>
    </first_popup>

    <!-- 选择生日 -->
    <SBetterCalendar class="z-999"
                     ref="betterCalendarRef"
                     :defaultType="page.defaultType"
                     :defaultValue="page.defaultValue"
                     :isLeap="page.defaultLeap"
                     :showCalendar="page.showCalendar"
                     @confirm="updateMemberBirthday($event)"
                     @cancel="cancelABirthday"
    ></SBetterCalendar>

    <!-- 选择祭日 -->
    <SBetterCalendar class="z-999"
                     ref="betterCalendarRefDie"
                     :defaultType="page.defaultDieType"
                     :defaultValue="page.defaultDieValue"
                     :isLeap="page.defaultDieLeap"
                     :showCalendar="page.showDieCalendar"
                     @confirm="updateMemberDie"
                     @cancel="cancelADie"
    ></SBetterCalendar>
    <!-- 选择祖籍地 -->
    <su-region-picker title="选择祖籍地"
                      :show="page.areaWindowDisplay"
                      @cancel="page.areaWindowDisplay = false"
                      @confirm="onRegionConfirm"
    ></su-region-picker>
    <!-- 选择现居地 -->
    <su-region-picker title="选择现居地"
                      :show="page.presentAddress"
                      @cancel="page.presentAddress = false"
                      @confirm="onAddressConfirm"
    ></su-region-picker>
    <!-- 选择墓地 -->
    <su-region-picker title="选择墓地"
                      :show="page.areaWindowDisplayDie"
                      @cancel="page.areaWindowDisplayDie = false"
                      @confirm="onRegionDieConfirm"
    ></su-region-picker>

    <!--  职业修改  -->
    <first_popup ref="occupationalPopup">
      <template #content>
        <view class="familyMemberPopUp_title mt_45">
          <view class="familyMemberPopUp_title_name">
            修改职业
          </view>
        </view>
        <image class="familyMemberPopUp_icon z_1" :src="`${IMG_URL}/index/add_icon.png`"></image>
        <view class="occupationPopup">
          <input v-model="page.occupation" class="occupationPopup_input" placeholder="请输入职业名称"
                 :focus="page.occupationFocus"
                 maxlength="10"></input>
        </view>
      </template>
    </first_popup>

    <su-select title="请选择学历" :show-select="page.academicQualificationsShow"
               :list="[{list:page.academicQualificationsList}]"
               @cancel="page.academicQualificationsShow = false" @confirm="academicQualificationsConfirm"
    ></su-select>
  </view>
</template>

<script setup>
  import HeaderTitle from '@/pages/genealogy/components/headerTitle.vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import { computed, nextTick, reactive, ref } from 'vue';
  import SingleGap from '@/pages/genealogy/components/singleGap.vue';
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import sheep from '@/sheep';
  import dayjs from 'dayjs';
  import personalData from '@/pages/genealogy/personalData.vue';
  import TextareGap from '@/pages/genealogy/components/textareGap.vue';
  import First_popup from '@/pages/genealogy/components/first_popup.vue';
  import SBetterCalendar from '@/sheep/components/s-better-calendar/s-better-calendar.vue';
  import SuRegionPicker from '@/sheep/ui/su-region-picker/su-region-picker.vue';
  import { calendar } from '@/sheep/components/s-better-calendar/calendar';
  import SuSelect from '@/pages/genealogy/components/su-select.vue';

  const page = reactive({
    options: {},
    headerHeight: 0,
    relationshipsList: [],
    personalData: {
      is_alive: true,
    },
    ismore: false,
    showCalendar: false,
    defaultType: 'solar',
    defaultValue: [100, 0, 0],
    defaultLeap: false,
    areaWindowDisplay: false,
    areaWindowDisplayDie: false,
    presentAddress: false,
    occupation: '',
    occupationFocus: false,
    showDieCalendar: false,
    defaultDieValue: [100, 0, 0],
    defaultDieType: 'solar',
    defaultDieLeap: false,
    academicQualificationsShow: false,
    academicQualificationsList: [],
  });
  const info = reactive({
    suernameFocus: false,
    namePopupFrom: {
      suername: '',
      name: '',
    },
  });
  const fontInfo = reactive({
    value: '',
    fontFocus: false,
  });

  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const betterCalendarRef = ref();
  const betterCalendarRefDie = ref();
  const fontPopUp = ref();

  onLoad((options) => {
    page.options = options;
  });

  onShow(() => {
    getRelationshipsList();
    getGenealogyPersonal(page.options.member_id);
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  // 获取关系列表
  async function getRelationshipsList() {
    let { data } = await sheep.$api.family.getFamilyRemarksList();
    page.relationshipsList = data;
  }

  // 获取个人资料
  async function getGenealogyPersonal(id) {
    let { data } = await sheep.$api.genealogy.getGenealogyPersonal({ id });
    page.personalData = data;
    page.personalData.is_alive = page.personalData.is_alive != 2;
  }

  async function goAvatarList() {
    const { code, msg } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.personalData.family_tree_id,
      action: 'add',
    });
    if (code == 1) {
      sheep.$router.go('/pages/familyPage/avatarsList', {
        member_id: page.personalData.id,
        flag: 1,
        sex: page.personalData.sex == 1 ? 1 : 2,
      });
    }
  }

  const namePopUp = ref();

  async function openNamePopup() {
    const { code, msg } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.personalData.family_tree_id,
      action: 'add',
    });
    if (code == 1) {
      info.namePopupFrom.suername = page.personalData.surname ? page.personalData.surname : '';
      info.namePopupFrom.name = page.personalData.name ? page.personalData.name : '';
      namePopUp._value.openPopup({
        title: '修改姓名',
        showTitle: false,
        maskClick: false,
        popupBackground: true,
        confirm: async () => {
          if (info.namePopupFrom.suername == '') {
            uni.showToast({
              title: '姓氏尚未填写',
              icon: 'none',
            });
            return;
          }
          if (info.namePopupFrom.name == '') {
            uni.showToast({
              title: '名称尚未填写',
              icon: 'none',
            });
            return;
          }
          let { code } = await sheep.$api.genealogy.updateMemberInfo({
            id: page.personalData.id,
            surname: info.namePopupFrom.suername,
            name: info.namePopupFrom.name,
          });
          namePopUp._value.closePopup();
          uni.$emit(`setMember_${page.personalData.id}`, {
            surname: info.namePopupFrom.suername,
            name: info.namePopupFrom.name,
          });
          info.namePopupFrom.name = '';
          info.namePopupFrom.suername = '';
          await getGenealogyPersonal(page.personalData.id);
        },
      });
    }

  }

  function namePopupClose() {
    info.suernameFocus = false;
  }

  function fontPopupClose() {
    fontInfo.fontFocus = false;
  }

  // 处理用户名的输入事件
  function suernameInput(e) {
    if (e.detail.value.length > 1) {
      let arr;
      arr = e.detail.value.match(/[\u4e00-\u9fa5]/g);
      if (!!arr) {
        info.namePopupFrom.suername = arr.join('').substring(0, 2);
      } else {
        info.namePopupFrom.name = '';
      }
    }
  }

  function surnameBlur(e) {
    info.namePopupFrom.suername = e.target.value;
  }

  function nameInput(e) {
    if (e.detail.value.length > 1) {
      let arr;
      arr = e.detail.value.match(/[\u4e00-\u9fa5]/g);
      if (!!arr) {
        info.namePopupFrom.name = arr.join('').substring(0, 4);
      } else {
        info.namePopupFrom.name = '';
      }
    }
  }

  function fontInput(e) {
    if (e.detail.value.length > 1) {
      let arr;
      arr = e.detail.value.match(/[\u4e00-\u9fa5]/g);
      if (!!arr) {
        info.namePopupFrom.name = arr.join('').substring(0, 4);
      } else {
        info.namePopupFrom.name = '';
      }
    }
  }

  async function openBetterCalendar() {
    const { code, msg } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.personalData.family_tree_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    if (!page.personalData.birthday) {
      page.showCalendar = true;
      return;
    }
    let birthday = dayjs(page.personalData.birthday).format('YYYY-MM-DD');
    let dateArr = birthday.split('-');
    dateArr[0] = Number(dateArr[0]) - 1900;
    dateArr[1] = Number(dateArr[1]);
    dateArr[2] = Number(dateArr[2]);
    if (page.personalData.birthday_type == 1) {
      let dayInfo = calendar.solar2lunar(dayjs(birthday).year(), dayjs(birthday).month() + 1, dayjs(birthday).date());
      console.log(dayInfo);
      dateArr[0] = Number(dayInfo.lunarDate.split('-')[0]) - 1900;
      dateArr[1] = Number(dayInfo.lunarDate.split('-')[1]) - 1;
      dateArr[2] = Number(dayInfo.lunarDate.split('-')[2]) - 1;
      let day = calendar.leapMonth(Number(dateArr[0]) + 1900);
      if (!!dayInfo.isLeap) {
        let arr = [dateArr[0], dateArr[1] + 1, dateArr[2]];
        betterCalendarRef.value.setPicker(arr, 'lunar', dayInfo.isLeap);
      } else {
        if (day <= 0) {
          betterCalendarRef.value.setPicker(dateArr, 'lunar', dayInfo.isLeap);
        } else {
          if (dateArr[1] > day) {
            let arr = [dateArr[0], dateArr[1] + 1, dateArr[2]];
            betterCalendarRef.value.setPicker(arr, 'lunar', dayInfo.isLeap);
          } else {
            if (dayInfo.isLeap) {
              let arr = [dateArr[0], dateArr[1] + 1, dateArr[2]];
              betterCalendarRef.value.setPicker(arr, 'lunar', dayInfo.isLeap);
            } else {
              if (dateArr[1] + 1 <= day) {
                betterCalendarRef.value.setPicker([dateArr[0], dateArr[1], dateArr[2]], 'lunar', dayInfo.isLeap);
              } else {
                betterCalendarRef.value.setPicker([dateArr[0], dateArr[1] + 1, dateArr[2]], 'lunar', dayInfo.isLeap);
              }
            }
          }

        }
      }
    } else {
      let arr = [];
      arr[0] = Number(page.personalData.birthday.split('-')[0] - 1900);
      arr[1] = Number(page.personalData.birthday.split('-')[1]) - 1;
      arr[2] = Number(page.personalData.birthday.split('-')[2]) - 1;
      betterCalendarRef.value.setPicker(arr, 'solar', false);
    }
    page.showCalendar = true;
  }

  async function openBetterCalendarDie() {
    const { code, msg } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.personalData.family_tree_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    if (!page.personalData.dieday) {
      page.showDieCalendar = true;
      return;
    }
    let birthday = dayjs(page.personalData.dieday).format('YYYY-MM-DD');
    if (page.personalData.is_lunar_die == 1) {
      let dayInfo = calendar.solar2lunar(dayjs(birthday).year(), dayjs(birthday).month() + 1, dayjs(birthday).date());
      // let isHaveIntercalaryMonth = 0;
      // if (calendar.leapMonth(dayInfo.lYear) != 0) {
      //   isHaveIntercalaryMonth = calendar.leapMonth(dayInfo.lYear)
      // }
      let day = calendar.leapMonth(dayjs(dayInfo.lunarDate).year());
      if (!!dayInfo.isLeap) {
        page.defaultDieValue = [
          dayInfo.lYear - 1900,
          dayInfo.lMonth,
          dayInfo.lDay - 1,
        ];
        page.defaultDieType = 'lunar';
        page.defaultDieLeap = true;
        betterCalendarRefDie._value.setPicker(page.defaultDieValue, page.defaultDieType, page.defaultDieLeap);
      } else {
        console.log(day);
        if (day <= 0) {
          let month = dayInfo.lMonth;
          page.defaultDieValue = [
            dayInfo.lYear - 1900,
            month - 1,
            dayInfo.lDay - 1,
          ];
          page.defaultDieType = 'lunar';
          page.defaultDieLeap = false;
          betterCalendarRefDie._value.setPicker(page.defaultDieValue, page.defaultDieType);
        } else {
          let month = dayInfo.lMonth;
          page.defaultDieValue = [
            dayInfo.lYear - 1900,
            month > day ? month : month - 1,
            dayInfo.lDay - 1,
          ];
          page.defaultDieType = 'lunar';
          page.defaultDieLeap = false;
          betterCalendarRefDie._value.setPicker(page.defaultDieValue, page.defaultDieType);
        }
      }
    } else {
      page.defaultDieType = 'solar';
      page.defaultDieValue = [
        dayjs(birthday).year() - 1900,
        dayjs(birthday).month(),
        dayjs(birthday).date() - 1,
      ];
      betterCalendarRefDie._value.setPicker(page.defaultDieValue, page.defaultDieType);
    }


    // let birthday = dayjs(page.personalData.dieday).format('YYYY-MM-DD');
    // let dateArr = birthday.split('-');
    // dateArr[0] = Number(dateArr[0]) - 1900;
    // dateArr[1] = Number(dateArr[1]);
    // dateArr[2] = Number(dateArr[2]);
    // if (page.personalData.is_lunar_die == 1) {
    //   let dayInfo = calendar.solar2lunar(dayjs(birthday).year(), dayjs(birthday).month() + 1, dayjs(birthday).date());
    //   dateArr[0] = Number(dayInfo.lunarDate.split('-')[0]) - 1900;
    //   dateArr[1] = Number(dayInfo.lunarDate.split('-')[1]) - 1;
    //   dateArr[2] = Number(dayInfo.lunarDate.split('-')[2]) - 1;
    //   let day = calendar.leapMonth(Number(dateArr[0]) + 1900);
    //   if (!!dayInfo.isLeap) {
    //     let arr = [dateArr[0], dateArr[1] + 1, dateArr[2]];
    //     betterCalendarRef.value.setPicker(arr, 'lunar', dayInfo.isLeap);
    //   } else {
    //     if (day <= 0) {
    //       betterCalendarRef.value.setPicker(dateArr, 'lunar', dayInfo.isLeap);
    //     } else {
    //       if (dateArr[1] > day) {
    //         let arr = [dateArr[0], dateArr[1] + 1, dateArr[2]];
    //         betterCalendarRef.value.setPicker(arr, 'lunar', dayInfo.isLeap);
    //       } else {
    //         if (dayInfo.isLeap) {
    //           let arr = [dateArr[0], dateArr[1] + 1, dateArr[2]];
    //           betterCalendarRef.value.setPicker(arr, 'lunar', dayInfo.isLeap);
    //         } else {
    //           betterCalendarRef.value.setPicker([dateArr[0], dateArr[1] + 1, dateArr[2]], 'lunar', dayInfo.isLeap);
    //         }
    //       }
    //
    //     }
    //   }
    // } else {
    //   let arr = [];
    //   arr[0] = Number(page.personalData.dieday.split('-')[0] - 1900);
    //   arr[1] = Number(page.personalData.dieday.split('-')[1]) - 1;
    //   arr[2] = Number(page.personalData.dieday.split('-')[2]) - 1;
    //   betterCalendarRef.value.setPicker(arr, 'solar', false);
    // }
    setTimeout(() => {
      page.showDieCalendar = true;
    }, 100);
  }

  function cancelABirthday() {
    page.showCalendar = false;
  }

  async function updateMemberBirthday(e) {
    const { data } = await sheep.$api.genealogy.updateMemberInfo({
      id: page.personalData.id,
      birthday_type: e.type == 'lunar' ? 1 : 2,
      birthday: e.type == 'lunar' ? e.lunarDateNumber : e.solarDate,
      isLeapMonth: e.isLeap ? 2 : 1,
    });
    page.showCalendar = false;
    await getGenealogyPersonal(page.personalData.id);
  }


  async function updateMemberDie(e) {
    const { data } = await sheep.$api.genealogy.updateMemberInfo({
      id: page.personalData.id,
      is_lunar_die: e.type == 'lunar' ? 1 : 2,
      dieday: e.type == 'lunar' ? e.lunarDateNumber : e.solarDate,
      isLeapMonths_die: e.isLeap ? 2 : 1,
    });
    page.showDieCalendar = false;
    await getGenealogyPersonal(page.personalData.id);
  }

  async function goReminderSetting() {
    const { code, msg } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.personalData.family_tree_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    sheep.$router.go('/pages/familyPage/reminderSettings', {
      member_id: page.personalData.id,
    });
  }

  async function goSignature() {
    const { code, msg } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.personalData.family_tree_id,
      action: 'add',
    });
    if (code == 1) {
      uni.setStorageSync('genealogy_sign', page.personalData.autograph);
      sheep.$router.go('/pages/familyPage/signature', {
        member_id: page.personalData.id,
        is_sign: 1,
        flag: 1,
      });
    } else {
      sheep.$helper.toast(msg);
    }
  }

  // 设置字号
  async function setTypeSize(e) {
    const { code, msg } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.personalData.family_tree_id,
      action: 'add',
    });
    if (code == 1) {
      fontInfo.value = page.personalData.card_zi ? page.personalData.card_zi : '';
      fontPopUp._value.openPopup({
        title: '修改字号',
        showTitle: false,
        maskClick: false,
        popupBackground: true,
        confirm: async () => {
          if (fontInfo.value == '') {
            uni.showToast({
              title: '字号尚未填写',
              icon: 'none',
            });
            return;
          }
          let { code } = await sheep.$api.genealogy.updateMemberInfo({
            id: page.personalData.id,
            card_zi: fontInfo.value,
          });
          fontPopUp._value.closePopup();
          fontInfo.value = '';
          await getGenealogyPersonal(page.personalData.id);
          await sheep.$store('family').setGenealogyTree(page.options.id);
          await sheep.$store('family').setGenealogyTreeStatus(true);
        },
      });
    }
  }

  async function openAncestral(index) {
    const { code, msg } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.personalData.family_tree_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    sheep.$api.data.area().then((res) => {
      if (res.code === 1) {
        uni.setStorageSync('areaData', res.data);
      }
    });
    if (index == 0) {
      // page.areaWindowDisplayDie = true;
      sheep.$router.go('/pages/extend/addressFill', { id: page.options.member_id, type: 7 });
    } else if (index == 1) {
      // page.areaWindowDisplay = true;
      sheep.$router.go('/pages/extend/addressFill', { id: page.options.member_id, type: 5 });
    } else {
      // page.presentAddress = true;
      sheep.$router.go('/pages/extend/addressFill', { id: page.options.member_id, type: 6 });
    }
  }

  async function onRegionConfirm(e) {
    const { data } = await sheep.$api.genealogy.updateMemberInfo({
      id: page.personalData.id,
      city_list: e.province_name + '-' + e.city_name + '-' + e.district_name,
      // ancestral: [e.province_name, e.city_name, e.district_name],
    });
    await getGenealogyPersonal(page.personalData.id);
    page.areaWindowDisplay = false;
  }

  async function onAddressConfirm(e) {
    const { data } = await sheep.$api.genealogy.updateMemberInfo({
      id: page.personalData.id,
      residence_list: e.province_name + '-' + e.city_name + '-' + e.district_name,
      // current_residence: [e.province_name, e.city_name, e.district_name],
    });
    await getGenealogyPersonal(page.personalData.id);
    page.presentAddress = false;
  }


  async function onRegionDieConfirm(e) {
    const { data } = await sheep.$api.genealogy.updateMemberInfo({
      id: page.personalData.id,
      current_residence: e.province_name + '-' + e.city_name + '-' + e.district_name,
      // current_residence: [e.province_name, e.city_name, e.district_name],
    });
    await getGenealogyPersonal(page.personalData.id);
    page.areaWindowDisplayDie = false;
  }

  const occupationalPopup = ref();

  async function openOccupationalPopup() {
    const { code, msg } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.personalData.family_tree_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    page.occupation = page.personalData.occupation;
    occupationalPopup._value.openPopup({
      title: '修改职业',
      showTitle: false,
      maskClick: false,
      popupBackground: true,
      confirm: async () => {
        if (!page.occupation) {
          uni.showToast({
            title: '职业尚未填写',
            icon: 'none',
          });
          return;
        }
        let { code } = await sheep.$api.genealogy.updateMemberInfo({
          id: page.personalData.id,
          occupation: page.occupation,
        });
        occupationalPopup._value.closePopup();
        page.occupation = '';
        await getGenealogyPersonal(page.personalData.id);
      },
    });
  }

  async function setAlice(e) {
    let { code } = await sheep.$api.genealogy.updateMemberInfo({
      id: page.personalData.id,
      is_alive: e ? 1 : 2,
    });
    await getGenealogyPersonal(page.personalData.id);
  }

  async function deleteMember() {
    uni.showModal({
      title: '删除家庭成员',
      content: '确定删除该家庭成员吗？',
      success: async (res) => {
        if (!!res.confirm) {
          uni.showLoading({
            title: '删除中...',
            mask: true,
          });
          let { code } = await sheep.$api.genealogy.deleteGenealogyMember({
            id: page.personalData.id,
            genealogy_id: page.personalData.family_tree_id,
          });

          if (code == 1) {
            // await sheep.$store('family').setGenealogyTree(sheep.$store('family').perfectOptions.id, !!sheep.$store('family').perfectOptions.member_id ? sheep.$store('family').perfectOptions.member_id : 0, !!sheep.$store('family').perfectOptions.is_firstScreen ? sheep.$store('family').perfectOptions.is_firstScreen : false, sheep.$store('family').perfectOptions.is_all, sheep.$store('family').perfectOptions.headcount);
            await sheep.$store('family').setGenealogyTreeStatus(true);
            uni.$emit(`delete_${page.personalData.id}`)
            setTimeout(() => {
              uni.hideLoading();
              uni.navigateBack();
            }, 1500);
          }
        }
      },
    });
  }

  function cancelADie() {
    page.showDieCalendar = false;
  }

  // 设置学历
  async function educationOpen() {
    const { data } = await sheep.$api.user.getEducationList();
    page.academicQualificationsList = data;
    page.academicQualificationsShow = true;
  }

  // 选择学历
  async function academicQualificationsConfirm(e) {
    let { code, msg } = await sheep.$api.genealogy.updateMemberInfo({
      id: page.personalData.id,
      education: page.academicQualificationsList[e[0]].edu_name,
    });
    if (code == 1) {
      page.academicQualificationsShow = false;
      await getGenealogyPersonal(page.personalData.id);
    } else {
      sheep.$helper.toast(msg);
    }
  }
</script>


<style scoped lang="scss">
  .personalData_avatar {

    .personalData_avatar_image {
      width: 30rpx;
      height: 30rpx;
    }

    .personalData_avatar_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #A0A0A0;
    }
  }

  .personalData_bottomEdit {
    .personalData_bottomEdit_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #A0A0A0;
    }
  }

  .relationshipPopup {
    width: 556rpx;
    max-height: 846rpx;

    .relationshipPopup_all {
      width: 556rpx;
      display: grid;
      grid-template-columns: repeat(3, 168rpx);
      grid-row-gap: 26rpx;

      .relationshipPopup_all_list {
        width: 168rpx;
        height: 63rpx;
        background: #E5E5E5;
        border-radius: 41rpx 41rpx 41rpx 41rpx;
      }
    }
  }

  .relationshipPopup_bottomContent {
    width: 393rpx;
    height: 80rpx;
    background: #FFFFFF;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 1rpx solid #707070;

    .relationshipPopup_bottomContent_input {
      text-align: center;
    }

    .relationshipPopup_bottomContent_placeholder {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #A0A0A0;
    }
  }

  .familyMemberPopUp {
    width: 506rpx;

    .familyMemberPopUp_title {
      width: 454rpx;

      .familyMemberPopUp_title_name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #292929;

      }

      .familyMemberPopUp_title_detail {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #9F9F9F;
      }
    }

    .familyMemberPopUp_icon {
      width: 147rpx;
      height: 147rpx;
      position: absolute;
      top: 0;
      right: 0;
    }

    .familyMemberPopUp_scrollView {
      width: 506rpx;
      overflow: hidden;
      white-space: nowrap;

      .familyMemberPopUp_scrollView_list {
        display: inline-block;
      }
    }

    .familyMemberPopUp_editInfo {
      width: 506rpx;

      .familyMemberPopUp_editInfo_left {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_right {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_placeholder {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #A0A0A0;
      }
    }
  }

  .occupationPopup {
    margin-top: 40rpx;
    width: 556rpx;

    .occupationPopup_input {
      width: 556rpx;
      height: 80rpx;
      border: 2rpx solid #707070;
      border-radius: 20rpx;
      text-align: center;
    }
  }

  .familyMemberPopUp_title {
    width: 454rpx;

    .familyMemberPopUp_title_name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 48rpx;
      color: #292929;

    }

    .familyMemberPopUp_title_detail {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #9F9F9F;
    }
  }

  .familyMemberPopUp_icon {
    width: 147rpx;
    height: 147rpx;
    position: absolute;
    top: 0;
    right: 0;
  }
</style>
